{% extends './indexOption.html' %}

{% block indexOption %}

<!-- 引入返回顶部按钮宏 -->

<title>动态</title>
<link rel="stylesheet" href="/css/template/BlogProfile.css">

<body style=" background-image: url('/images/public/位图/空间默认背景.jpg');">

  <!-- 返回顶部 -->

  <!-- 消息的按钮 -->
  <a href="newNews">
    <div class="newNews">
      <div class="number">
        <p class="p1"></p>
        <p class="p2">4245</p>
        <p class="p3"></p>
      </div>
      <img src="/images/BlogProfile/矢量图/消息.svg" alt="">
      <span class="newNewList">新消息</span>
    </div>
  </a>

  <img class="RightSwitchImgBtn" src="/images/BlogProfile/位图/博客切换背景按钮.jpg" alt="">

  <!-- 切换背景的模态框 -->
  <div class="switch-img" style="bottom: -300px;">
    <div class="top">更换背景</div>

    <!-- 点击弹出的切换背景图的模态框 -->
    <div class="bottom">
      <div class="imgs-1">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (1).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (2).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (3).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (4).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (5).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (6).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (7).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (8).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (9).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (10).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (11).jpg" alt="">
        <img class="beijing-img" src="/images/BlogProfile/位图/我的空间页背景 (12).jpg" alt="">
      </div>
      <div class="al-btn-box">
        <button class="preservation">保存</button>
        <button class="cancel">取消</button>
      </div>
    </div>
  </div>

  <div class="big-box">

    <!-- 左边盒子 -->
    <div class="left">
      <ul>
        <a href="/">
          <li>首页</li>
        </a>
        <a href="/rain">
          <li>暴风雨</li>
        </a>
        <a href="/profile">
          <li>我的空间</li>
        </a>
        <a href="/setting">
          <li>设置</li>
        </a>
      </ul>
      <br>
      <hr style="width: 120px;">
      <br>
      <ul>
        <a href="/home">
          <li>全部</li>
        </a>
        <a href="/original">
          <li>原创</li>
        </a>
        <a href="/picture">
          <li>图片</li>
        </a>
      </ul>
      <br>
      <hr style="width: 120px;">
      <br>
    </div>

    <!-- 中间内容 -->
    <div class="middle">
      <div class="PublishBox">
        <p class="xin">
          <span class="xin-1">今</span>
          <span class="xin-2">天</span>
          <span class="xin-3">有</span>
          <span class="xin-4">什</span>
          <span class="xin-5">么</span>
          <span class="xin-6">要</span>
          <span class="xin-7">分</span>
          <span class="xin-8">享</span>
          <span class="xin-9">的</span>
          <span class="xin-10">事</span>
          <span class="xin-11">呢</span>
          <span class="xin-12">？</span>
        </p>
        <textarea id="textarea" placeholder="今天有什么想说的？" maxlength="399"></textarea>
        <div class="fabiao">
          <!-- 添加表情 -->
          <span class="AddEmoticons">
            <img src="/images/BlogProfile/矢量图/表情.svg">
            <span>表情</span>
          </span>

          <!-- 添加图片 -->
          <span class="AddPicture">
            <img src="/images/BlogProfile/矢量图/图片.svg" alt="图片">
            <span>图片</span>
          </span>
          <input id="fileInput" type="file" class="PictureSelection" hidden multiple accept="image/*">
          <span class="documents"></span>
          <button class="release-btn">发布</button>

          <!-- 承装所有表情的盒子 -->
          <div class="AddEmoticonsBox">
            <div class="top">
              <span class="wordsSwitch" style="color: #ff8140;">emoji表情</span>
              <span class="wordsSwitch">QQ表情</span>
              <span class="wordsSwitch">颜文字</span>
            </div>

            <!-- emoji 表情 -->
            <div class="expressionMenu" style="display: block;">
              <ul>
                <li class="emojeLi" alt="[em_1]" title="高兴">
                  <img src="/images/BlogProfile/表情/emoji表情/1.png">
                </li>
                <li class="emojeLi" alt="[em_2]" title="大哭">
                  <img src="/images/BlogProfile/表情/emoji表情/2.png">
                </li>
                <li class="emojeLi" alt="[em_3]" title="紧张">
                  <img src="/images/BlogProfile/表情/emoji表情/3.png">
                </li>
                <li class="emojeLi" alt="[em_4]" title="可爱">
                  <img src="/images/BlogProfile/表情/emoji表情/4.png">
                </li>
                <li class="emojeLi" alt="[em_5]" title="亲亲">
                  <img src="/images/BlogProfile/表情/emoji表情/5.png">
                </li>
                <li class="emojeLi" alt="[em_6]" title="生气">
                  <img src="/images/BlogProfile/表情/emoji表情/6.png">
                </li>
                <li class="emojeLi" alt="[em_7]" title="淘气">
                  <img src="/images/BlogProfile/表情/emoji表情/7.png">
                </li>
                <li class="emojeLi" alt="[em_8]" title="难受">
                  <img src="/images/BlogProfile/表情/emoji表情/8.png">
                </li>
                <li class="emojeLi" alt="[em_9]" title="呲牙">
                  <img src="/images/BlogProfile/表情/emoji表情/9.png">
                </li>
                <li class="emojeLi" alt="[em_10]" title="笑哭">
                  <img src="/images/BlogProfile/表情/emoji表情/10.png">
                </li>
                <li class="emojeLi" alt="[em_11]" title="色">
                  <img src="/images/BlogProfile/表情/emoji表情/11.png">
                </li>
                <li class="emojeLi" alt="[em_12]" title="忧愁">
                  <img src="/images/BlogProfile/表情/emoji表情/12.png">
                </li>
                <li class="emojeLi" alt="[em_13]" title="飞吻">
                  <img src="/images/BlogProfile/表情/emoji表情/13.png">
                </li>
                <li class="emojeLi" alt="[em_14]" title="失落">
                  <img src="/images/BlogProfile/表情/emoji表情/14.png">
                </li>
                <li class="emojeLi" alt="[em_15]" title="害怕">
                  <img src="/images/BlogProfile/表情/emoji表情/15.png">
                </li>
                <li class="emojeLi" alt="[em_16]" title="恐惧">
                  <img src="/images/BlogProfile/表情/emoji表情/16.png">
                </li>
                <li class="emojeLi" alt="[em_17]" title="不屑">
                  <img src="/images/BlogProfile/表情/emoji表情/17.png">
                </li>
                <li class="emojeLi" alt="[em_18]" title="冒金星">
                  <img src="/images/BlogProfile/表情/emoji表情/18.png">
                </li>
                <li class="emojeLi" alt="[em_19]" title="哼哼">
                  <img src="/images/BlogProfile/表情/emoji表情/19.png">
                </li>
                <li class="emojeLi" alt="[em_20]" title="汗">
                  <img src="/images/BlogProfile/表情/emoji表情/20.png">
                </li>

              </ul>
            </div>

            <!-- QQ 表情 -->
            <div class="expressionMenu">
              <ul>
                <li class="QQLi" alt="[qq_1]" title="微笑">
                  <img src="/images/BlogProfile/表情/QQ表情/1.gif">
                </li>
                <li class="QQLi" alt="[qq_2]" title="撇嘴">
                  <img src="/images/BlogProfile/表情/QQ表情/2.gif">
                </li>
                <li class="QQLi" alt="[qq_3]" title="色">
                  <img src="/images/BlogProfile/表情/QQ表情/3.gif">
                </li>
                <li class="QQLi" alt="[qq_4]" title="发呆">
                  <img src="/images/BlogProfile/表情/QQ表情/4.gif">
                </li>
                <li class="QQLi" alt="[qq_5]" title="流泪">
                  <img src="/images/BlogProfile/表情/QQ表情/5.gif">
                </li>
                <li class="QQLi" alt="[qq_6]" title="害羞">
                  <img src="/images/BlogProfile/表情/QQ表情/6.gif">
                </li>
                <li class="QQLi" alt="[qq_7]" title="闭嘴">
                  <img src="/images/BlogProfile/表情/QQ表情/7.gif">
                </li>
                <li class="QQLi" alt="[qq_8]" title="睡">
                  <img src="/images/BlogProfile/表情/QQ表情/8.gif">
                </li>
                <li class="QQLi" alt="[qq_9]" title="大哭">
                  <img src="/images/BlogProfile/表情/QQ表情/9.gif">
                </li>
                <li class="QQLi" alt="[qq_10]" title="尴尬">
                  <img src="/images/BlogProfile/表情/QQ表情/10.gif">
                </li>
                <li class="QQLi" alt="[qq_11]" title="发怒">
                  <img src="/images/BlogProfile/表情/QQ表情/11.gif">
                </li>
                <li class="QQLi" alt="[qq_12]" title="调皮">
                  <img src="/images/BlogProfile/表情/QQ表情/12.gif">
                </li>
                <li class="QQLi" alt="[qq_13]" title="呲牙">
                  <img src="/images/BlogProfile/表情/QQ表情/13.gif">
                </li>
                <li class="QQLi" alt="[qq_14]" title="惊讶">
                  <img src="/images/BlogProfile/表情/QQ表情/14.gif">
                </li>
                <li class="QQLi" alt="[qq_15]" title="难过">
                  <img src="/images/BlogProfile/表情/QQ表情/15.gif">
                </li>
                <li class="QQLi" alt="[qq_16]" title="冷汗">
                  <img src="/images/BlogProfile/表情/QQ表情/16.gif">
                </li>
                <li class="QQLi" alt="[qq_17]" title="抓狂">
                  <img src="/images/BlogProfile/表情/QQ表情/17.gif">
                </li>
                <li class="QQLi" alt="[qq_18]" title="吐">
                  <img src="/images/BlogProfile/表情/QQ表情/18.gif">
                </li>
                <li class="QQLi" alt="[qq_19]" title="偷笑">
                  <img src="/images/BlogProfile/表情/QQ表情/19.gif">
                </li>
                <li class="QQLi" alt="[qq_20]" title="可爱">
                  <img src="/images/BlogProfile/表情/QQ表情/20.gif">
                </li>
                <li class="QQLi" alt="[qq_21]" title="白眼">
                  <img src="/images/BlogProfile/表情/QQ表情/21.gif">
                </li>
                <li class="QQLi" alt="[qq_22]" title="傲慢">
                  <img src="/images/BlogProfile/表情/QQ表情/22.gif">
                </li>
                <li class="QQLi" alt="[qq_23]" title="饥饿">
                  <img src="/images/BlogProfile/表情/QQ表情/23.gif">
                </li>
                <li class="QQLi" alt="[qq_24]" title="困">
                  <img src="/images/BlogProfile/表情/QQ表情/24.gif">
                </li>
                <li class="QQLi" alt="[qq_25]" title="惊恐">
                  <img src="/images/BlogProfile/表情/QQ表情/25.gif">
                </li>
              </ul>
            </div>

            <!-- 颜文字 -->
            <div class="expressionMenu">
              <ul>
                <li class="Emoticons">(*^▽^*)</li>
                <li class="Emoticons">(^_−)☆</li>
                <li class="Emoticons">o(´^｀)o</li>
                <li class="Emoticons">o(╥﹏╥)o</li>
                <li class="Emoticons">→_→</li>
                <li class="Emoticons">ψ(｀ー´)ψ</li>
                <li class="Emoticons">(•́へ•́╬)</li>
                <li class="Emoticons">(ー_ー)</li>
                <li class="Emoticons">|ू･ω･` )</li>
                <li class="Emoticons">(✪ω✪)</li>
                <li class="Emoticons">(ಥ_ಥ)</li>
                <li class="Emoticons">┗( ▔, ▔ )┛</li>
                <li class="Emoticons">(‾◡◝)</li>
                <li class="Emoticons">(≧∇≦)ﾉ</li>
                <li class="Emoticons">(❁´◡`❁)</li>
                <li class="Emoticons">(*＾-＾*)</li>
                <li class="Emoticons">(*^_^*)</li>
                <li class="Emoticons">`(*>﹏0*)′</li>
                <li class="Emoticons">(✿◡‿◡)</li>
                <li class="Emoticons">O(∩_∩)O</li>
                <li class="Emoticons">( •̀ ω •́ )✧</li>
                <li class="Emoticons">0.0</li>
                <li class="Emoticons">-.-</li>
                <li class="Emoticons">ƪ(˘⌣˘)ʃ</li>
              </ul>
            </div>
          </div>

          <!-- 预览图片 -->
          <div class="previewPicturesBox"></div>
        </div>
      </div>

      <!-- 微博内容 -->
      {% block blogContent %}

      {% endblock %}

    </div>
    <!-- 右边资料 -->
    <div class="right">
      <div class="background" style="background-image: url('/images/public/位图/空间默认背景.jpg')">
        <div class="img-box">
          <a href="/profile">
            <img src="/images/public/位图/我的头像.jpg" alt="我的头像">
          </a>
        </div>
      </div>
      <p class="nickname">俱往矣i</p>
      <div class="data-box">

        <div class="follow topOption">
          <span>10</span>
          <p>关注</p>
        </div>

        <div class="fans topOption">
          <span>13</span>
          <p>粉丝</p>
        </div>

        <a href="/profile">
          <div class="blog">
            <span>22</span>
            <p>微博</p>
          </div>
        </a>
      </div>

      <!-- 右边选项卡 -->
      <div>
        <div class="right-option" style="display: block;">
          <p class="right-option-p">我的关注</p>
          <hr>

          <!-- 模拟数据 -->
          <div class="mydataBox">
            <div class="mydataBoxA">
              <img class="userImg" src="/images/simulation/位图/模拟头像.jpg" alt="">
            </div>
            <div class="mydataBoxB">
              <a href="#">
                <span class="NickName">我是小明仔</span><br>
              </a>
              <span class="address">地址：河北-秦皇岛</span>
            </div>
          </div>

        </div>

        <div class="right-option">
          <p class="right-option-p">我的粉丝</p>
          <hr>
          <!-- 模拟数据 -->
          <div class="mydataBox">
            <div class="mydataBoxA">
              <img class="userImg" src="/images/simulation/位图/模拟头像.jpg" alt="">
            </div>
            <div class="mydataBoxB">
              <a href="#">
                <span class="NickName">我是小明仔</span><br>
              </a>
              <span class="address">地址：河北-秦皇岛</span>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>

  <script src="/js/myJS/My_JS.js"></script>

  <script>
    "use strict"
    // 右边关注和粉丝的选项卡
    let topOption = $Al(".topOption");  // 点击的选项
    let rightOption = $Al(".right-option"); // 弹出框

    for (let i = 0; i < rightOption.length; i++) {
      topOption[i].onclick = function () {
        // 先让两个弹出框全部隐藏 再显示需要显示的
        for (let j = 0; j < rightOption.length; j++) {
          rightOption[j].style.display = "none";
        }
        rightOption[i].style.display = "block";
      }
    }


    // 点击显示背景图切换模态框 如果隐藏就弹出 否则就隐藏
    $(".RightSwitchImgBtn").onclick = function () {
      let styBot = $(".switch-img").style.bottom;
      if (styBot === "-300px") {
        $(".switch-img").style.bottom = "0px";
      } else {
        $(".switch-img").style.bottom = "-300px";
      }
    }


    // 点击取消关闭下方模态框
    $(".cancel").onclick = function () {
      $(".switch-img").style.bottom = "-300px";
    };


    // 点击模态框中的背景图进行更换
    let Img = $Al(".beijing-img");
    for (let i = 0; i < Img.length; i++) {
      let BeijingImg = Img[i];
      BeijingImg.index = i + 1;
      Img[i].onclick = function () {
        $("body").setAttribute("style", `background-image:url('/images/BlogProfile/位图/我的空间页背景 (${this.index}).jpg')`);
        $(".background").setAttribute("style", `background-image:url('/images/BlogProfile/位图/我的空间页背景 (${this.index}).jpg')`);
      }
    }

    // 将选择的图片添加到容器中
    let PictureSelection = $(".PictureSelection"); // file input
    let previewPicturesBox = $(".previewPicturesBox"); // 装图片的容器
    $(".AddPicture").onclick = function () {
      PictureSelection.click()
      // 当文本框发生变化时候
      PictureSelection.onchange = function () {
        let FileListLength = PictureSelection.files.length; // 获取到上传文件的数组的长度
        for (let i = 0; i < FileListLength; i++) {
          $(".documents").innerHTML = `共选择了${FileListLength}张图片`;
          const blogImg = window.URL.createObjectURL(PictureSelection.files[i]);
          let previewPictures = document.createElement("img"); // 新建一个 img 标签
          previewPictures.src = blogImg;
          previewPictures.setAttribute("class", "previewPictures");
          previewPicturesBox.appendChild(previewPictures);
        }
      }
    }


    // 添加表情弹框
    let AddEmoticonsShow = true;
    $(".AddEmoticons").onclick = function () {
      if (AddEmoticonsShow) {
        $(".AddEmoticonsBox").style.display = "block";
        AddEmoticonsShow = false;
      } else {
        $(".AddEmoticonsBox").style.display = "none";
        AddEmoticonsShow = true;
      }
    }


    // 表情菜单切换选项卡
    let wordsSwitch = $Al(".wordsSwitch");
    let expressionMenu = $Al(".expressionMenu");
    for (let i = 0; i < expressionMenu.length; i++) {
      wordsSwitch[i].onclick = function () {
        for (let j = 0; j < expressionMenu.length; j++) {
          expressionMenu[j].style.display = "none";
          wordsSwitch[j].style.color = "black";
        }
        expressionMenu[i].style.display = "block";
        wordsSwitch[i].style.color = "#ff8140";
      }
    }


    // 添加颜文字表情
    let Emoticons = $Al(".Emoticons");
    for (let i = 0; i < Emoticons.length; i++) {
      Emoticons[i].onclick = function () {
        $D("textarea").value += ` ${Emoticons[i].innerHTML} `;
      }
    }


    // 添加Emoje表情
    let emojeLi = $Al(".emojeLi");
    for (let i = 0; i < emojeLi.length; i++) {
      emojeLi[i].onclick = function () {
        // 获取到点击表情的 alt 属性 并且加到文本框内
        const emojeLiAlt = emojeLi[i].getAttribute("alt");
        $D("textarea").value += emojeLiAlt;
      }
    }


    // 添加QQ表情
    let QQLi = $Al(".QQLi");
    for (let i = 0; i < QQLi.length; i++) {
      QQLi[i].onclick = function () {
        const QQLiAlt = QQLi[i].getAttribute("alt");
        $D("textarea").value += QQLiAlt;
      }
    }


    // 点击发布按钮
    $(".release-btn").onclick = function () {
      if ($D("textarea").value === "" && $D("fileInput").value === "") {
        alert("内容为空或未选择图片不能发表！")
        return
      }

      console.log($D("textarea").value)
      console.log('发布功能维护中，稍后再试。。。')
      // 表情替换
      // let textareaVal = $D("textarea").value;
      // textareaVal = transformation(textareaVal);
      // $(".testBoxTitle").innerHTML = textareaVal;

      // // 清空文本框
      // $D("textarea").value = "";
      // $D("fileInput").value = "";
      // $(".documents").innerHTML = "";

      // 获取选择上传的图片 展示到博客中
      // let previewPicturesImg = $Al(".previewPictures");
      // for (let i = 0; i < previewPicturesImg.length; i++) {
      //   let previewPicturesSrc = previewPicturesImg[i].getAttribute("src");
      //   let blogImgBoxImg = document.createElement("img"); // 新建一个 img 标签
      //   blogImgBoxImg.setAttribute("src", previewPicturesSrc);
      //   $(".blogImg-box").appendChild(blogImgBoxImg); // 将新建的 img 标签放到容器里
      // }
    }
    // 表情转换
    function transformation(str) {
      str = str.replace(/\[em_([0-9]*)\]/g, "<img src='/images/BlogProfile/表情/emoji表情/$1.png'>");
      str = str.replace(/\[qq_([0-9]*)\]/g, "<img src='/images/BlogProfile/表情/QQ表情/$1.gif'>");
      return str;
    }
  </script>
</body>

{% endblock %}